<!DOCTYPE html>

<!--
Copyright 2018 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autofill Assistant Test</title>

    <script>
      var load = function() {
        createShadowDom();
        moveTouchArea();
      }

      var createShadowDom = function() {
      var shadowSection = document.getElementById("shadowsection");
      var shadowRoot = shadowSection.attachShadow({mode: 'open'});
      shadowRoot.innerHTML =
          '<button id="shadowbutton" type="button" onclick="removeButton()">\
          Test Button</button>';
      }

      var removeButton = function() {
        var button = document.getElementById("button");
        button.parentNode.removeChild(button);
      }

      var removeTouchArea = function(id) {
        var touch_area = document.getElementById(id);
        touch_area.parentNode.removeChild(touch_area);
      }

      var moveTouchArea = function() {
        var touch_area = document.getElementById("touch_area");
        setTimeout(function(){touch_area.style.top += "100px";}, 100);
        setTimeout(function(){touch_area.style.top += "200px";}, 200);
        setTimeout(function(){touch_area.style.top += "300px";}, 300);
        setTimeout(function(){touch_area.style.top += "400px";}, 400);
        setTimeout(function(){touch_area.style.top += "500px";}, 500);
        setTimeout(function(){touch_area.style.top += "600px";}, 600);
      }
    </script>

    <style>
      #full_height_section {
        height: 100vh;
      }

      #touch_area {
        position: absolute;
      }
      #overlay_in_frame {
          visibility: hidden;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 9999;
          background-color: #ff0000;
      }
    </style>
  </head>

  <body onload="load()">
    <div>
      <form name="address" id="address_section">
        <div id="billing">
          <h2>Billing Address</h2>
          Name: <input type="text" name="name" id="name"><br>
          Address: <input type="text" name="address"><br>
          City: <input type="text" name="city"><br>
          State: <select name="state">
            <option value="CA">CA</option>
            <option value="MA">MA</option>
            <option value="NY">NY</option>
            <option value="MD">MD</option>
            <option value="OR">OR</option>
            <option value="OH">OH</option>
            <option value="IL">IL</option>
            <option value="DC">DC</option>
          </select> <br>
          <span>Zip:</span> <input name="zip" value="1234"> <br>
          <span>Country:</span> <input name="country" value="some_country"> <br>
          <span>Email:</span> <input name="email" value="email@example.com"> <br>
        </div>
      </form>
    </div>

    <div>
      <button id="button" type="button">Test Button</button><br>
    </div>

    <div>
      <input id="input" type="text" />
    </div>

    <div>
      <p id="touch_area" ontouchend="removeTouchArea('touch_area')">
        Touchable Area</p>
      <br>
    </div>

    <div>
      <p id="touch_area_1" ontouchend="removeTouchArea('touch_area_1')">
        Touchable Area 1 (iFrame)</p>
      <br>
    </div>

    <div>
      <p id="touch_area_2" ontouchend="removeTouchArea('touch_area_2')">
        Touchable Area 2 (iFrame)</p>
      <br>
    </div>

    <hr>
    <div id="shadowsection"></div>

    <!--
    Intentionally make this section has the full height of the window
    to force scroll when operating on the elements below not in this
    section.
    -->
    <div id="full_height_section">
      <p>Blank Section
    </div>
    <div id="focus">Hidden Text</div>

    <div>
      <p id="touch_area_3" ontouchend="removeTouchArea('touch_area_3')">
        Touchable Area 3 (iFrame)</p>
      <br>
    </div>

    <div>
      <p id="touch_area_4" ontouchend="removeTouchArea('touch_area_4')">
        Touchable Area 4 (iFrame)</p>
      <br>
    </div>

    <iframe id="iframe" width="100%" height="500" src=
            "autofill_assistant_target_website_iframe_two.html"></iframe>


    <div id="overlay_in_frame">
      This is an overlay that covers the whole frame.
    </div>
  </body>
</html>
